<template>
  <div class="login">
    <div class="login-form">
      <div class="title">管理员登录</div>
      <el-form :model="loginForm" :rules="loginRules" ref="loginRef" class="demo-ruleForm">
        <el-form-item prop="loginStr">
          <el-input
            @focus="strFocus"
            @blur="strBlur"
            placeholder="请输入用户名或手机号码"
            v-model="loginForm.loginStr" clearable>
            <i slot="prefix" class="el-icon-user-solid" :class="{active:isLoginStr}"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            @focus="passFocus"
            @blur="passBlur"
            placeholder="请输入密码"
            v-model="loginForm.password" show-password clearable>
            <i slot="prefix" class="el-icon-lock" :class="{active:isPassword}"></i>
          </el-input>
          <span style="color:#ff0000">账号名：admin; 密码：123abc</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {AdLoginWithPw} from '@/network/login'
export default {
  name: "Login",
  data(){
    return{
      isLoginStr:false,
      isPassword:false,
      loginForm:{
        loginStr:'', //用户名或手机号码
        password:'',  //密码
      },
      loginRules:{
        loginStr: [{ required: true, message: '请输入用户名或手机号码', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created(){  //判断是否已经登录
    if(window.localStorage.getItem("admin")!=null){
      this.$router.replace("/business");
    }
  },
  methods: {
    login() {
      this.$refs.loginRef.validate((valid) => {
        if (valid) {
          AdLoginWithPw(this.loginForm).then(res => {
            if (res.data.status == 200) {
              window.localStorage.setItem("admin",JSON.stringify(res.data.data));  //存储admin信息
              this.$router.replace("/business");
            } else if (res.data.status == 300){
              this.$alert('该账号已被冻结，请联系管理员解冻！', '提示', {
                confirmButtonText: '确定',
              });
            }
            else {  //登录失败
              this.$message.error("用户名或密码错误，请重新登录！");
            }
          })
        } else {
          this.$message.error("请填好登录信息！");
          return false;
        }
      });
    },
    strFocus(){
      this.isLoginStr = true;
    },
    strBlur(){
      this.isLoginStr = false;
    },
    passFocus(){
      this.isPassword = true;
    },
    passBlur(){
      this.isPassword = false;
    }
  }
}
</script>

<style scoped>
  .login{
    height: 100%;
    background-color: rgb(55,75,118);
  }
  .title{
    text-align: center;
    padding: 20px 0 30px 0;
  }
  .login-form{
    padding:0 20px;
    background-color: #fff;
    width:400px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 5px #fff;
  }
  .login-form::before{
    content:'法务服务平台管理系统';
    position:absolute;
    color: white;
    font-size: 20px;
    top:-70px;
    left:50%;
    transform: translateX(-50%);
  }
  .el-button{
    width: 100%;
  }
  .active{
    color:#409EFF;
  }
</style>
